<template>
  <div>
    <ArticleEditor
      title="编辑文章"
      :article="article"
      editorCacheID="articleCacheID"
      @submit="fetchUpdateArticle"
    >
      <template #extra>
        <Space>
          <Button
            type="dashed"
            size="small"
            :danger="true"
            @click="message.warn('双击执行删除操作')"
            @dblclick="handleDelete"
          >
            <template #icon>
              <DeleteOutlined />
            </template>
            删除文章
          </Button>
          <Badge :count="commentCount">
            <Button type="ghost" size="small" @click="openCommentModal">
              <template #icon>
                <CommentOutlined />
              </template>
              文章评论
            </Button>
          </Badge>
          <ButtonGroup>
            <Button size="small" :disabled="true">
              <template #icon>
                <HeartOutlined />
              </template>
              {{ article?.meta?.likes }} 喜欢
            </Button>
            <Button size="small" :disabled="true">
              <template #icon>
                <EyeOutlined />
              </template>
              {{ article?.meta?.views }} 阅读
            </Button>
            <Button size="small" target="_blank" :href="getBlogArticleUrl(article?.id!)">
              <template #icon>
                <RocketOutlined />
              </template>
            </Button>
          </ButtonGroup>
        </Space>
      </template>
    </ArticleEditor>
    <ArticleComment
      v-model:visible="isVisibleCommentModal"
      :loading="commentLoading.state.value"
      :count="commentCount"
      :comments="comments"
      @manage="handleManage"
      @refresh="() => fetchComments(article?.id!)"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Badge, Button, ButtonGroup, Modal, Space, message } from 'ant-design-vue'
import {
  EyeOutlined,
  HeartOutlined,
  CommentOutlined,
  DeleteOutlined,
  RocketOutlined,
} from '@ant-design/icons-vue'

import ArticleEditor from '../Editor/index.vue'
import ArticleComment from './CommentBox.vue'
import { getBlogArticleUrl } from '@/transformers/url'
import type { Article } from '@/constants/article'
import { getComments } from '@/store/comment'
import type { CommentTree } from '@/store/comment'
import { SortType } from '@/constants/sort'
import { deleteArticles, getArticle, putArticle } from '@/store/article'
import { useLoading } from '@/handcer'

const router = useRouter()
const route = useRoute()
const articleId = route.params.article_id as string
const article = ref<Article | null>(null)
// const articleCacheID =

// Modal
const isVisibleCommentModal = ref<boolean>(false)
const openCommentModal = () => {
  isVisibleCommentModal.value = true
}

// const closeCommentModal = () => {
//   isVisibleCommentModal.value = false;
// };

// Comment
const commentLoading = useLoading()
const commentCount = ref<number>(0)
const comments = ref<Array<CommentTree>>([])
const fetchComments = (articleId: number) => {
  commentLoading
    .promise(getComments({ per_page: 50, sort: SortType.Asc, post_id: articleId }))
    .then((result) => {
      commentCount.value = result.pagination?.total!
      comments.value = result.tree
    })
}

// 调整评论页
const handleManage = () => {
  router.push({ path: '/comment', query: { post_id: article.value?.id! } })
}

const fetchDeleteArticle = () => {
  deleteArticles([article.value?._id!]).then(() => {
    router.push('/article/list')
  })
}

const fetchUpdateArticle = (_article: Article) => {
  return putArticle(_article).then((result) => {
    article.value = result
  })
}

// const handleManageComment = () => {};

const handleDelete = () => {
  Modal.confirm({
    title: `你确定要彻底删除文章 《${article!.value!.title}》 吗？`,
    content: '该行为是物理删除，不可恢复！',
    onOk: fetchDeleteArticle,
    okButtonProps: {
      danger: true,
      type: 'ghost',
    },
  })
}

onMounted(() => {
  getArticle(articleId).then((_article) => {
    fetchComments(_article.id!)
    // const localContent = getUEditorCache(articleCacheID);
    // if (Boolean(localContent) && localContent !== _article.content) {
    // Modal.confirm({
    //     title: "本地缓存存在未保存的文章，是否要覆盖远程数据？",
    //     content: "如果覆盖错了，就自己刷新吧！",
    //     okText: "本地覆盖远程",
    //     cancelText: "使用远程数据",
    //     centered: true,
    //     okButtonProps: {
    //         danger: true
    //     },
    //     onOk() {
    //         // article.value = { ..._article, content: localContent || ""}
    //     },
    //     onCancel() {
    //         article.value = _article;
    //     }
    // })
    // } else {
    article.value = _article
    // }
  })
})
</script>

<style lang="less" scoped></style>
